<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib prefix="fmt" 
           uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
	</script>
		<style>
			div#a{
				width:556px;
				height:360px;
				border-style:solid;
				border-width:1px;
				position:absolute;
				left:460px;
				top:20px;
			
			}
			.point
			{
				color:red;
			
			}
			div#b{
				border-bottom-style:solid;
				border-width:1px;
			}
			p{
				margin:0px;
				position:relative;
				left:15px;
			}
			form{
				position:relative;
				left:25px;
				top:20px;
			
				
			}
			select{
			width:143px;
			height:23px;
			}
		</style>
</head>
<body>
	<div id="a">
		 <div id="b">
			<p>添加收货地址</p>
		 </div>
		 <form action="${pageContext.request.contextPath }/user/insertAddress" method="post">
			<label class="point">*</label><label>收货人:</label><br/>
			<input class="name" type="text" name="name" ></input>&nbsp&nbsp&nbsp&nbsp<label class="name"  style="display:none;color:red;">请填写您的收货人姓名</label><br/>
			<label class="point">*</label><label>所在地区:</label><br/>
			<select id="first_select" name="province" >
				<option value="">请选择</option>			
			</select>
			<br/>
			<label class="point">*</label><label>详细地址:</label><br/>
			<input type="text" class="address" name="address"/>&nbsp&nbsp&nbsp&nbsp<label class="address"  style="display:none;color:red;">请填写您的收货人地址</label><br/>
			<label class="point">*</label><label>手机号码:</label><br/>
			<input type="text" class="num"  name="phonenum"/>
			<label class="num" style="display:none;color:red;">请填写您的收货人手机号码</label><br/>
			<label>地址别名</label><br/>
			<input class="alia" type="text" name="addressalias"/><label>建议写常用名称</label>
			<button class="button" type="button" >家里</button>
			<button class="button" type="button" >父母家</button>
			<button class="button" type="button" >公司</button>
			<br/>
			<input type="submit" value="保存收货地址" style="margin-top:5px;"/>
		 </form>
		 
		</div>
		<script>
				$(document).ready(function(){
					/* var address = "${address}";
					var json=eval("("+address+")"); */
					
					var json=$.parseJSON('${address}');
					$.each(json.provincesList,function(index,content){
						$("#first_select").append("<option value="+content.Name+">"+content.Name+"</option>")
					})
				})
			$(document).ready(function (){
				$("#first_select").blur(function (){
					$.ajax({
						url:"${pageContext.request.contextPath }/user/slecetCity?province="+$("#first_select").val(),
						dataType:"json",
						success:function(data)
						{
							$("#second_select").remove();
							$("#first_select").after(
							"&nbsp&nbsp&nbsp<select id='second_select' name='city' style='width:143px;height:23px;'>"
							+"<option value=''>请选择</option>"
							+"</select>"	
							);
			
							$.each(data.citys,function(index,content){
								$("#second_select").append("<option value="+content.name+">"+content.name+"</option>")
							});
							/* $.each(data.Citys,function(index,content){
								$("#second_select").append("<option value="+content.Name+">"+content.Name+"</option>")
							}) */
						}
					});
				})
				})

				$(document).ready(function()
						{ 
							$(".button").click(function()
							{
							
								$(".alia").val($(this).text());
							}
							)	
						 }) 
				 $(document).ready(function()
					{ 
						$($(".name")[0]).blur(function()
						{
							if($($(".name")[0]).val()=="")
								{ 
									$($(".name")[1]).show(); 
								} 
								else
								{
									$($(".name")[1]).hide(); 
								}
						}
						)
							
					 }) 
				  $(document).ready(function()
					{ 
						$($(".address")[0]).blur(function()
						{
							if($($(".address")[0]).val()=="")
								{ 
									$($(".address")[1]).show(); 
								} 
								else
								{
									$($(".address")[1]).hide(); 
								}
						}
						)
							
					 }) 
				  $(document).ready(function()
					{ 
						$($(".num")[0]).blur(function()
						{
								if($($(".num")[0]).val()=="")
								{ 
									$($(".num")[1]).show(); 
									return;
								} 
								else
								{
									var str = $($(".num")[0]).val();
								    var ret = /^1[34578]\d{9}$/;
								    if(!(ret.test(str))){
								    	$($(".num")[1]).text("号码格式错误");
								    	$($(".num")[1]).show();
								    	return;
								    }
								    
								}
								$($(".num")[1]).hide(); 
								
						}
						)
							
					 }) 
	
		

		</script>
</body>
</html>